// 自定义指令
// dom为绑定到的dom元素，binding.value为当前dom元素的值
import { useIntersectionObserver } from '@vueuse/core'
import load from '@/assets/images/load.gif'
export default {
	install (app) {
		// 图片懒加载
		app.directive('imglazy', {
			mounted (imgdom, binding) {
				const { stop } = useIntersectionObserver(
					imgdom,
					([{ isIntersecting }]) => {
						if (isIntersecting) {
							// 显示loading
							imgdom.src = load
							// 进入可视区域，使用dom对象给src赋值
							setTimeout(() => {
								imgdom.src = binding.value
							}, 300)

							// 图片加载图片，显示默认图片
							imgdom.onerror = () => {
								imgdom.src = load
							}
							stop()
						}
					},
					{
						threshold: 0
					}
				)
			}
		})
	}
}